<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12.DOM</title>
</head>

<body>
  <!-- 1.如何阻止冒泡和默认行为 -->
  e.preventDefault() 阻止默认行为
  e.stopPropagation() 阻止冒泡

  <!-- 2.查找、添加、删除、移动DOM节点 -->
  createElement('P')

  document.getElementById()...
  document.querySelector()...

  document.appendChild()

  removeChild()

  移动节点: 先获取一个节点，再去插入
  const p1 = document.getElementById('div1')
  body.appendChild(p1)

  <!-- 3.减少DOM操作 -->
  1.缓存DOM查询结果
  2.createDocumentFragment()

  <!-- 4.load和ready区别 -->
  document.addEventListener('load', function() {
  // 页面全部加载完才会执行，包括图片，视频
  })
  document.addEventListener('DOMContentLoaded', function() {
  // DOM渲染完可执行，此时图片，视频还可能没有加载完
  })


  <script>
    document.querySelectorAll

    document.addEventListener('load', function () {
      // 页面全部加载完才会执行，包括图片，视频
    })
    document.addEventListener('DOMContentLoaded', function () {
      // DOM渲染完可执行，此时图片，视频还可能没有加载完
    })
  </script>



</body>

</html>